<template>
  <div class="topic-wrapper container">
    <div class="point-question">
      <Question
        v-for="item in topicList"
        :key="item.id"
        :question="item"
        :qType="item.question_type"
        :collected="topicCollected"
        :answer="current_field"
        :is_answered="answered"
        @change="change"
        @collected="changeCollected"
      ></Question>
    </div>
    <div class="pagination-wrapper">
      <template v-if="status == 1">
        <el-button type="primary" size="small" @click="handleTopicNext" v-if="recordId"
          >下一题</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="handleTopicEnd"
          v-else-if="!recordId && topicAnswered == 0"
          >提交</el-button
        >
      </template>
      <template v-else>
        <el-button type="primary" size="small" @click="handleTopicEnd" v-if="topicAnswered == 0"
          >提交</el-button
        >
      </template>
    </div>
  </div>
</template>

<script>
import Question from '../components/wrong-question'
import { mapState } from 'vuex'
export default {
  components: {
    Question
  },
  data() {
    return {
      status: 0,
      recordId: 0,
      topicList: [],
      current_field: { radio: '', checkList: [] },
      topicCurrentAnswer: [],
      topicLoading: true,
      topicAnswered: 0
    }
  },
  computed: {
    ...mapState({
      topicId: state => state.exercise.topic_id,
      topicIsright: state => state.exercise.topic_is_right,
      topicCollected: state => state.exercise.topic_collected
    }),
    answered() {
      return this.topicAnswered == 1 && !this.topicLoading
    }
  },
  created() {
    this.recordId = this.$route.query.id
    this.status = this.$route.query.type
    this.getExamTopic()
  },
  methods: {
    // 获取试题
    getExamTopic() {
      let _this = this
      _this.initOptions()
      _this.$api.getExamTopicWrong(
        {
          record_id: this.recordId.toString()
        },
        res => {
          _this.topicList = res.data
          const topic = _this.topicList.find(item => item)
          this.$store.commit('exercise/SET_WRONG_TOPIC_ID', topic.id)
          _this.recordId = topic.next_record_id
          _this.topicLoading = false
          this.topicAnswered = 0
          _this.setTopicCollected()
          _this.setTopicCorrectAnswer()
        }
      )
    },
    // 选择的值变化时触发
    change(value) {
      this.topicCurrentAnswer = value
    },
    // 初始化参数，不然会影响其他试题参数
    initOptions() {
      this.topicLoading = true
      this.topicCurrentAnswer = []
      this.current_field = {
        radio: '',
        checkList: []
      }
    },
    // 设置试题收藏默认状态
    setTopicCollected() {
      const topic = this.topicList.find(item => item)
      this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', topic.collected)
    },
    // 切换收藏状态
    changeCollected() {
      let status = this.topicCollected == 1 ? 0 : 1
      this.$api.postExamTopicCollect(
        {
          topic_id: this.topicId.toString(),
          status: status
        },
        res => {
          this.$message.info(res.data)
          this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', status)
        }
      )
    },
    // 设置当前试题的正确答案
    setTopicCorrectAnswer() {
      this.$store.commit('exercise/SET_POINT_CURRENT_CORRECT_ANSWER', this.topicList)
    },
    // 下一题
    async handleTopicNext() {
      if (this.topicAnswered == 0) {
        await this.handleSubmitAnswer()
        if (this.topicIsright == 1) this.getExamTopic()
        this.topicAnswered = 1
      } else {
        this.getExamTopic()
        this.$store.commit('exercise/SET_POINT_NEXT')
      }
    },
    // 直接提交
    handleTopicEnd() {
      if (this.topicAnswered == 0) {
        this.topicAnswered = 1
        this.handleSubmitAnswer()
      }
    },
    // 提交答案
    handleSubmitAnswer() {
      const topic = this.topicList.find(item => item)
      this.$store.commit('exercise/SET_WRONG_TOPIC_IS_RIGHT', {
        question_type: topic.question_type,
        answer_data: this.topicCurrentAnswer
      })
      // 提交答案
      this.$api.postExamTopicWrong({
        topic_level: 1,
        topic_id: this.topicId.toString(),
        is_right: this.topicIsright
      })
    }
  },
  destroyed() {
    // 销毁页面时初始化vuex的状态
    this.$store.commit('exercise/SET_TOPIC_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.topic-wrapper {
  margin-top: 10px;
  background-color: #ffffff;
  .point-question {
    padding: 5px 20px 20px;
  }
  .pagination-wrapper {
    border-top: 1px solid #f7f7f7;
    padding: 24px 20px;
    display: flex;
    justify-content: flex-end;
    .el-button {
      width: 140px;
    }
  }
}
</style>
